<!-- 在App.vue总要写三个标签，template负责html，script负责js，style负责样式 -->
<template>
  <div class="person">
    <h1>需求：温度大于40或水位大于80时向服务器发送请求</h1>
    <h2>温度：{{ temp }}</h2>
    <h3>水位：{{ height }}</h3>
    <button @click="changeTemp">温度+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>


<script>//加上setup就是语法糖，自动返回，但是组件名要另外写，通过name属性来设置
import { reactive, ref, toRef, toRefs, watch, watchEffect } from 'vue'
//js
  export default {
    name: 'Preson',
    setup() {
      let temp = ref(20)
      let height = ref(10)

      function changeTemp() {
        temp.value += 10
      }

      function changeHeight() {
        height.value += 10
      }

      // watch([temp, height], (value) => {
      //   if(value[0] >= 40 || value[1] >= 80){
      //     console.log('发送请求')
      //   }//这是watch实现的逻辑，当需要监视的数据变得很多时会很麻烦
      // })

      watchEffect(() => {
        if(temp >= 40 || height >= 80){
          console.log('发送请求')
        }
      })//这是watchEffect的实现，他自己会监视使用到的数据，减少代码量
      return {temp, height, changeHeight, changeTemp}
    }
  }
</script>


<style scoped> 
  .person {
    width: 100%;
    height: 100%;
    background-color: pink;
  }
</style>
